<template>
  <div class="table-form">
    <div class="table-form-content">
      <el-table
        :data="tableData"
        style="width: 100%; height: 550px; overflow-y: scroll"
      >
        <div v-for="(item, index) in tableHeader" :key="index">
          <el-table-column
            v-if="item.type !== 'button'"
            :width="item.width"
            :label="item.label"
            :prop="item.type"
          >
          </el-table-column>
          <el-table-column
            v-else
            :label="item.label"
            :prop="item.type"
            fixed="right"
          >
            <template slot-scope="scope">
              <span
                class="table-item-btn"
                v-for="(bItem, index) in scope.row.button"
                :key="index"
              >
                <el-button
                  @click="handleClick(bItem.key, scope.row)"
                  type="text"
                  size="small"
                >
                  {{ bItem.label }}
                </el-button>
              </span>
            </template>
          </el-table-column>
        </div>
      </el-table>
    </div>
    <div class="table-form-pagination" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "table-form",
  components: {},
  data() {
    return {};
  },
  props: {
    pagination: {
      type: Object,
      default: undefined,
    },
    tableData: {
      type: Array,
      default: undefined,
    },
    tableHeader: {
      type: Array,
      default: undefined,
    },
  },

  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("change-page", val);
    },
    handleClick(key, val) {
      this.$emit("btn-click", key, val);
    },
  },
};
</script>
<style lang="less" scoped>
.table-form-content {
  margin-top: 30px;
}
.table-item-btn {
  margin: 0 10px;
}
</style>
